<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园二手市场 - 首页</title>
    <meta name="description" content="校园二手交易平台，买卖二手教材、电子产品、生活用品">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="header">
        <div class="container">
            <a href="index.html" class="logo">
                <img src="images/logo.png" 
     class="logo_img w-12 h-12 object-contain bg-primary rounded-full p-2 shadow-sm transition-all duration-300 hover:scale-105 hover:shadow-md" 
     alt="校园二手市场">
                <span>校园二手市场</span>
            </a>

            <nav class="nav">
                <a href="index.html" class="active"><i class="fas fa-home"></i> 首页</a>
                <a href="products.html"><i class="fas fa-list"></i> 商品</a>
                <a href="cart.html"><i class="fas fa-shopping-cart"></i> 购物车</a>
                <a href="publish.html"><i class="fas fa-plus-circle"></i> 发布</a>
                <a href="login.html" id="auth-link">
                    <img id="user-avatar" src="" alt="用户头像" class="user-avatar">
                    <span id="auth-text">登录/注册</span>
                </a>
            </nav>

            <button class="mobile-menu-btn" id="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

    <!-- 移动菜单 -->
    <div class="mobile-menu" id="mobile-menu">
        <a href="index.html" class="active"><i class="fas fa-home"></i> 首页</a>
        <a href="products.html"><i class="fas fa-list"></i> 商品</a>
        <a href="cart.html"><i class="fas fa-shopping-cart"></i> 购物车</a>
        <a href="publish.html"><i class="fas fa-plus-circle"></i> 发布</a>
        <a href="login.html"><i class="fas fa-user"></i> 登录/注册</a>
    </div>

    <!-- 主横幅 -->
    <section class="banner">
        <div class="banner-slide active">
            <div class="banner-content container">
                <h2>校园二手交易平台</h2>
                <p>让闲置物品找到新主人</p>
                <a href="products.html" class="btn btn-primary">立即逛逛</a>
            </div>
        </div>
    </section>

    <!-- 快速搜索 -->
    <section class="search-box">
        <div class="container">
            <input type="text" placeholder="搜索商品...">
            <button><i class="fas fa-search"></i></button>
        </div>
    </section>

    <!-- 热门分类 -->
    <section class="categories">
        <div class="container">
            <h2 class="section-title"><i class="fas fa-tags"></i> 热门分类</h2>
            <div class="category-grid">
                <a href="products.html?category=教材" class="category">
                    <div class="category-icon"><i class="fas fa-book"></i></div>
                    <span>教材书籍</span>
                </a>
                <a href="products.html?category=电子" class="category">
                    <div class="category-icon"><i class="fas fa-laptop"></i></div>
                    <span>电子产品</span>
                </a>
                <a href="products.html?category=生活" class="category">
                    <div class="category-icon"><i class="fas fa-home"></i></div>
                    <span>生活用品</span>
                </a>
                <a href="products.html?category=服饰" class="category">
                    <div class="category-icon"><i class="fas fa-tshirt"></i></div>
                    <span>服装服饰</span>
                </a>
            </div>
        </div>
    </section>

    <!-- 商品展示 -->
    <section class="products">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-star"></i> 最新商品</h2>
                <a href="products.html">查看更多 <i class="fas fa-arrow-right"></i></a>
            </div>

            <div class="product-grid">
                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/seed/iphone/300/200" alt="二手iPhone 12">
                    </div>
                    <div class="product-info">
                        <h3>二手iPhone 12</h3>
                        <div class="price">¥2999</div>
                        <div class="meta">
                            <span><i class="fas fa-map-marker-alt"></i> 长江大学</span>
                            <span><i class="fas fa-clock"></i> 2小时前</span>
                        </div>
                    </div>
                </div>

                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/seed/macbook/300/200" alt="MacBook Pro">
                    </div>
                    <div class="product-info">
                        <h3>MacBook Pro 13</h3>
                        <div class="price">¥5999</div>
                        <div class="meta">
                            <span><i class="fas fa-map-marker-alt"></i> 武汉大学</span>
                            <span><i class="fas fa-clock"></i> 5小时前</span>
                        </div>
                    </div>
                </div>

                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/seed/textbook/300/200" alt="计算机教材">
                    </div>
                    <div class="product-info">
                        <h3>计算机网络教材</h3>
                        <div class="price">¥45</div>
                        <div class="meta">
                            <span><i class="fas fa-map-marker-alt"></i> 华中科技大学</span>
                            <span><i class="fas fa-clock"></i> 1天前</span>
                        </div>
                    </div>
                </div>

                <div class="product-card">
                    <div class="product-image">
                        <img src="https://picsum.photos/seed/bicycle/300/200" alt="自行车">
                    </div>
                    <div class="product-info">
                        <h3>山地自行车</h3>
                        <div class="price">¥350</div>
                        <div class="meta">
                            <span><i class="fas fa-map-marker-alt"></i> 武汉理工大学</span>
                            <span><i class="fas fa-clock"></i> 2天前</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 发布CTA -->
    <section class="cta">
        <div class="container">
            <h2>有闲置物品要出售？</h2>
            <p>立即发布商品，让校园里的同学看到</p>
            <a href="publish.html" class="btn btn-primary"><i class="fas fa-plus-circle"></i> 免费发布</a>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-links">
                <a href="about.html">关于我们</a>
                <a href="contact.html">联系我们</a>
                <a href="privacy.html">隐私政策</a>
            </div>
            <p>&copy; 2025 校园二手市场. 保留所有权利.</p>
        </div>
    </footer>

    <!-- 脚本 -->
    <script src="js/api.js"></script>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
</body>
</html>